import Page from "../../components/Page/Page";
import { Table, Button, Drawer, Space, Form, Input, InputNumber, notification, Popconfirm } from "antd";
import { useMemo, useEffect, useState, useRef, useLayoutEffect } from "react";
import { getAllType, addType, delType, editType } from '../../api/roomType'

const Room = () => {
    const columns = [
        {
            title: '房型名称',
            dataIndex: 'name',
        },
        {
            title: '床数量',
            dataIndex: 'beds',
        },
        {
            title: '价格',
            dataIndex: 'price',
        },
        {
            title: '押金',
            dataIndex: 'yaPrice',
        },
        {
            title: '简称',
            dataIndex: 'shortName',
        },
        {
            title: '入住人数',
            dataIndex: 'liveLimit',
        },
        {
            title: '早餐券数量',
            dataIndex: 'couponNum',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (_, record) =>
              data.length >= 1 ? (
                <Popconfirm title="你确定要删除吗?" onConfirm={() => handleDelete(record.key)}
                okText="确定" cancelText="取消">
                  <a>删除</a>
                </Popconfirm>
              ) : null,
          },
    ];
    const onChange = (value) => {
        console.log('changed', value);
    };
    const handleDelete = (key) => {
        const newData = data.filter((item) => item.key !== key);
        setData(newData);
        confirmDel(data[key]._id)
    };
    const [data, setData] = useState([]);
    const [limit, setLimit] = useState(30);
    const [page, setPage] = useState(1);
    const [total, setTotal] = useState(0);
    const getData = async () => {
        let res = await getAllType(limit, page)

        const { success, data, count } = res;
        console.log(res);
        console.log(data);
        for (let a = 0; a < data.length; a++) {
            data[a].key = a

        }
        if (success) {
            setData(data);
            setTotal(count)
        };
    }
    useEffect(() => {
        getData();
    }, [limit, page])
    const confirmDel = async (id)=>{
        let res = await delType({typeid: id});
        const  {success} = res;
        if (!success) return notification.open({ message: '删除失败', })
        notification.open({ message: '删除成功', })
        getData()
    }

    const formRef = useRef(null)
    const [showAdd, setShowAdd] = useState(false)
    const handleAdd = async () => {
        const values = formRef.current.getFieldsValue(true)
        console.log('values', values)
        let res = await addType(values);
        const { success } = res
        if (!success) return notification.open({ message: '添加失败', })
        notification.open({ message: '添加成功', })
        getData()
    }
    return (
        <Page title="房型维护">
            <div style={{ padding: '15px' }}>
                <Button type="primary" onClick={() => { setShowAdd(true) }}>添加新的房型</Button>
            </div>
            <Table
                columns={columns}
                dataSource={data}
                pagination={{
                    pageSize: 5,
                }}
            />
            <Drawer
                visible={showAdd}
                size="large"
                onClose={() => { setShowAdd(false) }}>
                <Space>
                    <Button type="primary" onClick={() => { setShowAdd(false); handleAdd() }} >
                        立即添加
                    </Button>
                    <Button onClick={() => { setShowAdd(false) }} style={{ marginRight: '20px' }}>取消</Button>
                </Space>
                <Form ref={formRef}>
                    <Form.Item
                        label="房型名称"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '请填写房型名称',
                            },
                        ]}
                    >
                        <Input placeholder="请填写房型名称" style={{ width: '200px' }} />
                    </Form.Item>
                    <Form.Item label="简称" name="shortName">
                        <Input placeholder="请填写房间简称" style={{ width: '200px' }} />
                    </Form.Item>
                    <Form.Item label="入住人数" name="liveLimit">
                        <InputNumber min={1} onChange={onChange} />
                    </Form.Item>
                    <Form.Item label="床数" name="beds">
                        <InputNumber min={1} max={10} onChange={onChange} />
                    </Form.Item>
                    <Form.Item
                        label="价格"
                        name="price"
                        rules={[
                            {
                                required: true,
                                message: '请填写价格',
                            },
                        ]}
                    >
                        <Input placeholder="请输入价格" style={{ width: '200px', marginRight: '5px' }} />
                    </Form.Item>
                    <Form.Item label="押金" name="yaPrice">
                        <Input placeholder="请填写押金" style={{ width: '200px', marginRight: '5px' }} />
                    </Form.Item>
                    <Form.Item label="早餐券数量" name="couponNum">
                        <InputNumber min={1} onChange={onChange} style={{ width: '160px', marginRight: '5px' }} />
                    </Form.Item>
                </Form>
            </Drawer>
        </Page>
    )
}

export default Room;